<template>
  <t-modal okText="导入" cancelText="关闭" :title='$ct("databaseImportTable","数据库导入表")' :width="1200" :visible="visible"
           :confirmLoading="loading"
           @ok="handleSubmit()" @cancel="
			() => {
				$emit('cancel');
			}
		">
    <div class="toolbar flex justify-between flex-wrap">
      <div class="table-operator">
        <a-form layout="inline">
          <div class="flex justify-between flex-wrap">
            <a-form-item style="width: 200px;">
              <a-select show-search style="width: 200px;" placeholder="数据库名" v-model="queryParam.database"
                        @change="databaseChange">
                <a-select-option v-for="(item, index) in databaseCodeList" :value="item.uuid"
                                 :key="index">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item style="width: 200px;">
              <a-select show-search placeholder="表名" style="width: 200px;padding-left: 10px"
                        v-model="queryParam.tableName">
                <a-select-option v-for="(item, index) in dataTableCodeList" :value="item.tableName"
                                 :key="index">
                  {{ item.tableName }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <div class="table-page-search-submitButtons flex align-center">
              <a-button style="margin-left: 10px;margin-bottom: 10px;" type="primary" @click="search">{{$ct("search","查询")}}
              </a-button>
              <a-button class="cu-btn-filter margin-left-xs" style="margin-bottom: 10px;"
                        @click="resetSearchForm()">{{$ct("reset","重置")}}
              </a-button>
            </div>
          </div>
        </a-form>
      </div>
    </div>
    <div id="components-layout-demo-basic">
      <a-layout>
        <a-layout>
          <a-layout-content>
            <div class="page-common-sub-box">
              <s-table ref="table" size="small" :columns="$toI18nFormat(columns)" :data="loadData"
                       :rowSelection="rowSelection" :rowKey="(record) => record.tableName"
                       showPagination="auto" @rowClick="rowClick" :rowClassName="rowClassName"
                       :scroll="scrollXY" :pageSize="500">
                <span v-for="(item,index) in $toI18nFormat(columns)" :slot="item.slotName">
                  <span :key="index">{{$ct(item.slotName,item.defaultTitle)}}</span>
                </span>
              </s-table>
            </div>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </div>
  </t-modal>
</template>

<script>
  import {
    STable
  } from '@/components';


  export default {
    props: {
      visible: {
        type: Boolean,
        required: true,
      },
      loading: {
        type: Boolean,
        default: () => false,
      },
      model: {
        type: Object,
        default: () => null,
      },
    },
    name: 'TableList',
    components: {
      STable,
    },
    data() {
      return {
        pagination: {
          pageSizeOptions: ['30', '20', '50', '100'],
        },
        queryParam: {},
        url: {
          // getAllDatabases: '/system/sysGenTable/getAllDatabases',
          getAllDatabases: '/system/sysDatabaseConnection/getPageSet',
          getPageSetByDatabase: '/system/sysGenTable/getPageSetByDatabase',
          tableNameImportSave: '/system/sysGenTable/tableNameImportSave',
          // getPageSetByDatabaseAll: '/system/sysGenTable/getPageSetByDatabaseAll',
          getPageSetByDatabaseAll: '/system/sysDatabaseConnection/getTable',
        },
        loadData: (parameter) => {
          const requestParameters = Object.assign({}, parameter, this.queryParam);
          return this.$post(this.url.getPageSetByDatabase, requestParameters).then((res) => {
            return res;
          });
        },
        columns:[{
          title: '表名',
          dataIndex: 'tableName',
          align: 'center',
          width: 300,
        },
          {
            title: '来自数据库',
            dataIndex: 'tableCat',
            align: 'center',
            width: 300,
            langCode: "fromDatabase",
          },
          {
            title: '表注释',
            dataIndex: 'tableRemarks',
            align: 'center',
            width: 200,
            langCode: "tableNotes",
          },
        ],
        cities: [],
        databaseValue: '',
        dataTableValue: '',
        selectedRowKeys: [],
        selectedRows: [],
        uuid: '',
        uuids: '',
        userInfo: {},
        tableNameValue: '',
        labelCol: {
          xs: {
            span: 24,
          },
          sm: {
            span: 7,
          },
        },
        wrapperCol: {
          xs: {
            span: 24,
          },
          sm: {
            span: 13,
          },
        },
        form: this.$form.createForm(this),
        databaseCodeList: [],
        dataTableCodeList: [],
        subHeight: 0,
      };
    },
    computed: {
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
          type: 'radio',
        };
      },
      scrollXY() {
        let subHeight = this.subHeight ? this.subHeight : 500
        let height = subHeight - 40 - 40
        return {y: height};
      },
    },
    methods: {
      onLoad() {
        this.$nextTick(() => {
          this.queryParam = {};
          this.dataTableCodeList = [];
          this.getDataBase();
          this.$refs.table.refresh();
          this.selectedRowKeys = [];
          this.selectedRow = [];
        });
      },
      getDataBase() {
        this.$post(this.url.getAllDatabases).then((res) => {
          this.databaseCodeList = res.rows;
        });
      },
      resetSearchForm() {
        this.queryParam = {};
        this.$refs.table.refresh();
      },
      databaseChange(value) {
        this.dataTableCodeList = [];
        this.$post(this.url.getPageSetByDatabaseAll, {
          uuid: value,
        }).then((res) => {
          this.dataTableCodeList = res;
        });
      },
      dataTableChange(value) {
        this.dataTableCodeList = value;
      },
      getRowKeys(row) {
        return row.uuid; // 每条数据的唯一识别值
      },
      rowClassName(row) {
        return row.tableName === this.uuid ? 'bg-bray' : ''; // 每条数据的唯一识别值
      },
      rowClick(record, index) {
        const that = this;
        that.info = record;
        that.uuid = record.tableName;
        that.rowClassName(record);
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectedRows = selectedRows;
      },
      handleSubmit(e) {
        if (this.info || this.selectedRowKeys?.length) {
          this.$post(this.url.tableNameImportSave, {
            tableName: this.info ? this.info.tableName : this.selectedRows[0].tableName,
            notes: this.info ? this.info.tableRemarks : this.selectedRows[0].tableRemarks,
            dbUuid: this.queryParam?.database,
          }).then((res) => {
            if (res.statusCode === 200) {
              this.$emit('ok');
              this.$message.success(res.message);
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.warn('请选择一条数据');
        }
      },
      search() {
        // this.queryParam = {
        // 	database: this.databaseValue,
        // 	tableName: this.dataTableValue
        // }
        this.$refs.table.refresh();
      },
    },
  };
</script>

<style lang="less" scoped>
  .ant-layout-content {
    background: #fff;
  }
</style>
